<template>
<div>
    <div style="width:20%;float:left">
     <Tree :data="treeData" @on-select-change='getUploads' ></Tree>
     </div>
    <Upload
        multiple
        type="drag"
        action="http://10.31.156.62:3000/upload/upload"
        style="width:15%;float:left"
        name = "avatar"
        :data="uploadData"
        :on-success="onSuccess">
        <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="30" style="color: #3399ff"></Icon>
            <p>Click or drag files here to upload</p>
        </div>
    </Upload>
    
      
    <Input v-model="keyWords" search enter-button placeholder="Enter something..." @on-search="onSearch" style="width:50%;float:right"/>
    <Button type="error" @click="removeData" style="float:right;margin-right:25px">批量删除</Button>
    <div style="width:60%;float:right">
    <Table border :columns="columns" highlight-row ref="currentRowTable" :data="list"
     @on-select="handleSelectionChange" @on-select-cancel="handleSelectionChange" @on-select-all="handleSelectionChange" @on-select-all-cancel="handleSelectionChange"></Table>
    <Page :total="total" show-elevator @on-change="onChangePage" />
     <Modal
        v-model="dataModel"
        title="数据查看"
        @on-ok="ok"
        @on-cancel="cancel"
        footer-hide>
         <Form ref="formValidate" :model="formValidate"  :label-width="60">
            <FormItem label="文件名称" prop="originalname">
                <Input v-model="formValidate.originalname"/>
            </FormItem>
            <FormItem label="文件大小" prop="size">
                <Input v-model="formValidate.size"/>
            </FormItem>
            <FormItem label="文件类型" prop="mimetype">
                <Input v-model="formValidate.mimetype" />
            </FormItem>
            <FormItem label="上传时间" prop="date">
                <Input v-model="formValidate.date" />
            </FormItem>
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">确定</Button>
            </FormItem>
        </Form>
    </Modal>
    </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      treeData: [],
      uploadData: {},
      buttonProps: {
        type: "default",
        size: "small"
      },
      formValidate: {
        _id: "",
        originalname: "",
        size: "",
        mimetype: ""
      },
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "文件名称",
          key: "originalname",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "person"
                }
              }),
              h("strong", params.row.originalname)
            ]);
          }
        },
        {
          title: "文件大小",
          key: "size"
        },
        {
          title: "文件类型",
          key: "mimetype",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: ""
                }
              }),
              h("strong", params.row.mimetype)
            ]);
          }
        },
        {
          title: "上传时间",
          key: "date",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: ""
                }
              }),
              h("strong", params.row.date)
            ]);
          }
        },
        {
          title: "Action",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.row._id);
                    }
                  }
                },
                "查看"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.uploadremove(params.row._id);
                      // this.remove(params.row._id);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      list: [],
      page: 1,
      limit: 10,
      total: 0,
      keyWords: "",
      nodeSelected: "",
      dataModel: false,
      host: "http://10.31.156.62:3000",
      deletedId: []
    };
  },
  methods: {
    onSuccess() {
      this.getlist();
    },
    show(index) {
      this.axios({
        url: `${this.host}/upload/data/${index}`,
        method: "get"
      }).then(res => {
        console.log(res)
          //res.data.rows[i].date = res.data.rows[i].date.moment();
        this.formValidate = res.data;
        this.dataModel = true;
      });
    },
    uploadremove(index) {
      this.$Modal.confirm({
        title: "数据删除",
        content: "您确定删除吗",
        onOk: () => {
          this.axios({
            url: `${this.host}/upload/data/${index}`,
            method: "delete"
          }).then(res => {
            this.$Message.success("Delete success");
            this.getlist();
          });
        }
      });
    },
    getlist() {
      this.axios({
        url: `${this.host}/upload/list`,
        method: "post",
        data: {
          page: this.page,
          limit: this.limit,
          name: this.keyWords,
          belong: this.nodeSelected._id
        }
      }).then(res => {
        for (var i in res.data.rows) {
          res.data.rows[i].date = res.data.rows[i].date.moment();
        }
        this.total = res.data.total;
        this.list = res.data.rows;
      });
    },
    onChangePage(page) {
      this.page = page;
      this.getlist();
    },
    onSearch() {
      this.getlist();
    },
    ok() {},
    cancel() {
      this.formValidate = {};
    },
    handleSubmit(name) {
      this.$refs[name].validate(valid => {
        if (valid) {
            this.dataModel = false;
        } 
      });
    },
    removeData() {
      var ids = [];
      if (this.deletedId.length <= 0) {
        this.$Message.error("至少删除一条");
      } else {
        this.$Modal.confirm({
          title: "数据删除",
          content: "您确定删除吗",
          onOk: () => {
            for (var i = 0; i < this.deletedId.length; i++) {
              ids.push(this.deletedId[i]._id);
            }
            this.axios({
              url: `${this.host}/upload/data/removes`,
              method: "post",
              data: {
                ids: ids.toString()
              }
            }).then(res => {
              this.$Message.success("删除成功!!");
              this.getlist();
            });
          }
        });
      }
    },
    handleReset(name) {
      this.$refs[name].resetFields();
    },
    handleSelectionChange(val) {
      this.deletedId = val;
    },
    getUploads(nodeArr) {
      if(nodeArr[0]){
        this.nodeSelected = nodeArr[0];
        if (nodeArr != "") {
          this.uploadData = {
            belong: nodeArr[0]._id + nodeArr[0].path
          };
          this.axios({
            url: `${this.host}/upload/list`,
            method: "post",
            data: {
              belong: nodeArr[0]._id
            }
          }).then(res => {
            //console.log(res)
            for (var i in res.data.rows) {
              res.data.rows[i].date = res.data.rows[i].date.moment();
            }
            //res.data.rows.date= res.data.rows.date.moment()
            this.list = res.data.rows;
            this.total=res.data.total;
          });
        }
      }
      
    }
  },
  onSuccess(response, file, fileList) {
    this.getlist();
  },
  mounted() {
    this.axios({
      url: `${this.host}/cate/list/3`,
      method: "post"
    }).then(res => {
      this.treeData = res.data;
    });
  }
};
</script>
